<template>
  <!--<div>
    <div class="footer" v-if="type === 1">
      <div class="left" @click="likeGo()">
        <i class="icon star"  v-if="!islike" ></i>
        <i class="icon star active"  v-if="islike"  ></i>
        想去
      </div>
      <div class="right">
        <a href="tel:020-89442063">
          <i class="icon tel"></i>
          电话咨询
        </a>
      </div>
    </div>

    <div  class="footer" v-if="type === 2">
      <div class="left">
        <i class="icon tel-grey"></i>
        电话咨询
      </div>
      <div class="right"  @click="showBox()"> 立即购买 </div>
    </div>
  </div>-->

  <footer>
    <div class="flex">
      <div class="f1 align-self">
        <a href="tel:020-89442063">
          <i class="icon tel-grey"></i>
          <span>电话咨询</span>
        </a>
      </div>
      <div class="f3 align-self" @click="showBox()"> 立即购买 </div>
    </div>
  </footer>

</template>
<script>
  export default ({
    props: {
      'type': {
        type: Number,
        default: 1
      },
      islike: {
        type: Boolean,
        default: false
      }
    },
    mounted () {
      /* console.log(this.$refs.ddd.offsetHeight) */
    },
    methods: {
      showBox () {
        this.$emit('showBox')
      },
      likeGo () {
        this.$emit('likeGo')
      }
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/redifined.styl"
  footer
  .align-self
    &.f1
      flex 1 1 0%
      .icon.tel-grey
        background-position 0rem -10.55rem
    &.f3
      flex 2 1 0%

  .footer
    display flex
    justify-content space-between
    align-items center
    width 100%
    font-size: 15px
    position fixed
    z-index 100
    bottom 0
    background #fff
    border-top 1px solid #e5e5e5
    .icon
      width 1.2rem
      height 1.333rem
      display inline-block
      background-image url("../../assets/iconlist.png")
      background-repeat no-repeat
      background-size 100%
      vertical-align middle
      &.star
        background-position: -0rem 0.35rem
      &.star.active
        background-position: -0rem -4.7rem
      &.tel
        background-position: -0rem -0.9rem
      &.tel-grey
        background-position: -0rem -3.6rem
        margin-right cal(-12) rem
    .left, .right
      color #333
      text-align center
      height 1.333rem
    .left
      flex 1 1 0%
    .right
      flex 2 1 0%
      background #cb934b
      color #fff
      line-height 1.333rem
      a
        color #fff

</style>
